<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.custom {
  display: flex;
}

</style>
<template>
  <Card>
    <div>
      <Row style="text-align:left;padding:10px 0;">
        <Col span="4">
        <Input v-model="pageable.queryStr" @on-enter="doSearch" placeholder="分组号/名称/备注">
        </Input>
        </Col>
        <Col span="20" style="text-align:right;">
        <Button type="info" icon="md-refresh" @click="loadDatas()">刷新</Button>
        <Button type="success" icon="ios-add-circle-outline" @click="showModal()">新增</Button>
        </Col>
      </Row>
      <Table :loading="spinShow" border :columns="columnDatas" :data="tableList"></Table>
      <Row style="text-align:right;padding:10px 0;">
        <Page :total="totalElements" size="small" show-elevator :page-size="pageable.size" @on-change="pageChange"></Page>
      </Row>

      <Modal v-model="modal1" :title="modalName" :mask-closable="false" width="720" :scrollable="true"
             :closable="false">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
          <FormItem label="名称" prop="name">
            <Input v-model="formValidate.name" placeholder="名称"></Input>
          </FormItem>
          <FormItem label="分组号" prop="groupType">
            <InputNumber v-model="formValidate.groupType" placeholder="分组号" :min="100"></InputNumber>
          </FormItem>
          <FormItem label="排序" prop="sort">
            <InputNumber v-model="formValidate.sort" placeholder="排序" :min="0" :max="50"></InputNumber>
          </FormItem>
          <FormItem label="映射值(数字)" prop="value">
            <InputNumber v-model="formValidate.value" placeholder="映射值(数字)" :min="0"></InputNumber>
          </FormItem>
          <FormItem label="映射值（字符串）" prop="value">
            <Input v-model="formValidate.valueStr" placeholder="映射值（字符串）"></Input>
          </FormItem>
          <FormItem label="备注">
            <Input v-model="formValidate.remark" placeholder="备注"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
           <Button @click="doCancel">关闭</Button>
           <Button type="primary" @click="doSave">保存</Button>
        </div>
      </Modal>
    </div>
  </Card>
</template>
<script>
export default {
  components: {},
  data: function () {
    return {
      pageObj: { total: 0, size: 20, index: 0 },
      childObj: {},
      spinShow: false,
      modal1: false,
      modalName: '新增',
      tableList: [],
      totalElements: 0,
      formValidate: {
        name: '',
        groupType: null,
        sort: 0,
        type: null,
        remark: '',
        valueStr: ''
      },
      ruleValidate: {
        name: [{required: true, message: '必填项！', trigger: 'blur'}],
        groupType: [{type: 'number', required: true, message: '必填项！', trigger: 'blur'}]
      },
      pageable: {
        page: 0,
        size: 25,
        queryStr: ''
      },
      columnDatas: [{
        title: 'ID',
        key: 'id',
        align: 'center'
      }, {
        title: '名称',
        key: 'name',
        align: 'center'
      }, {
        title: '分组号',
        key: 'groupType',
        align: 'center'
      }, {
        title: '排序',
        key: 'sort',
        align: 'center'
      }, {
        title: '映射值（数字）',
        key: 'value',
        align: 'center'
      }, {
        title: '映射值（字符串）',
        key: 'valueStr',
        align: 'center'
      }, {
        title: '备注',
        key: 'remark',
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width: 200,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'info',
                ghost: true,
                size: 'small',
                icon: 'ios-create-outline'
              },
              style: {
                margin: '3px'
              },
              on: {
                click: () => {
                  this.modalName = '编辑'
                  this.formValidate = JSON.parse(JSON.stringify(params.row))
                  this.modal1 = true
                }
              }
            }, '编辑'),
            h('Button', {
              props: {
                type: 'error',
                ghost: true,
                size: 'small',
                icon: 'ios-trash-outline'
              },
              style: {
                margin: '3px'
              },
              on: {
                click: () => {
                  let config = {
                    title: '提示',
                    content: '您确定删除吗？',
                    onOk: () => {
                      this.doDelete(params.row.id)
                    }
                  }
                  this.$Modal.confirm(config)
                }
              }
            }, '删除')
          ])
        }
      }]
    }
  },
  created: function () {
    this.loadDatas()
  },
  mounted: function () {
  },
  destroyed: function () {
  },
  methods: {
    loadDatas: function () {
      this.spinShow = true
      window.myapi.dict_list(this.pageable).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.tableList = resp.data.data.content
          this.totalElements = resp.data.data.totalElements
        }
      }).finally(() => {
        this.spinShow = false
      })
    },
    doSearch: function () {
      this.pageable.page = 0
      this.loadDatas()
    },
    doSave: function () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (this.formValidate.id) {
            this.updateOp()
          } else {
            this.saveOp()
          }
        } else {
          this.$Message.error('请填写必填项')
        }
      })
    },
    saveOp: function () {
      window.myapi.dict_save(this.formValidate).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '新增成功'
          })
          this.loadDatas()
          this.updateOptsCache()
        }
      }).catch(infos => {
        this.$Notice.warning({
          title: infos
        })
      }).finally(() => {
        this.modal1 = false
        this.formValidate = {}
      })
    },
    updateOp: function () {
      window.myapi.dict_update(this.formValidate).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '更新成功'
          })
          this.loadDatas()
          this.updateOptsCache()
        }
      }).catch(infos => {
        this.$Notice.warning({
          title: infos
        })
      }).finally(() => {
        this.modal1 = false
        this.formValidate = {}
      })
    },
    updateOptsCache: function () {
      window.myapi.dict_opts().then(res => {
        if (res.data.status === 200 && res.data.status === 200) {
          this.$store.commit('user/addOpts', res.data.data)
        } else {
          this.$Message.error(res.data.msg)
        }
      }).catch(function (e) {
        console.log('catch wrong ,,,,,,,,')
      })
    },
    pageChange: function (index) {
      this.pageable.page = index - 1
      this.loadDatas()
    },
    showModal: function () {
      this.modalName = '新增'
      this.modal1 = true
    },
    doCancel () {
      this.modal1 = !this.modal1
      this.formValidate = {}
    },
    doDelete (id) {
      let params = [id]
      window.myapi.dict_delete(params).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.$Notice.success({
            title: '删除成功'
          })
          this.loadDatas()
        } else {
          this.$Notice.error({
            title: resp.data.msg
          })
        }
      }).catch(infos => {
        this.$Notice.warning({
          title: infos
        })
      }).finally(() => {
        this.modal1 = false
        this.formValidate = {}
      })
    }
  }
}

</script>
